<template>
  <div class="menuList">
    <div class="firstTitile" v-for="(item, index) in data" :key="index">
      <div class="title">{{ item.title }}</div>
      <div class="listBox">
        <div
          class="route"
          :class="{ 'is-active': pageName === citem.path }"
          v-for="(citem, cindex) in item.children"
          :key="cindex"
          @click="handleChangePage(citem, cindex)"
        >
          {{ citem.title }}
          <img
            :src="require('@/assets/images/rightIcon3.png')"
            v-if="pageName === citem.path"
          />
          <img :src="require('@/assets/images/rightIcon2.png')" v-else />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { pageNameInit } from "../../index";
export default {
  data() {
    return {
      pageName: "",
    };
  },
  props: {
    data: Array,
  },
  watch: {
    $route(n) {
      this.pageName = n.query.pageName;
    },
  },
  created() {
    this.pageName = pageNameInit(this.$route, this.pageData);
  },
  methods: {
    handleChangePage(item) {
      this.$router.push({
        path: this.$route.path,
        query: { pageName: item.path },
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
.menuList {
  .firstTitile {
    // height: 429px;
    .title {
      padding-bottom: 12px;
      margin: 0 28px 0 27px;
      font-family: Segoe UI;
      // font-weight: bold;
      font-size: 19px;
      color: #666666;
      border-bottom: solid 1px rgba(206, 203, 203, 0.54);
    }

    .listBox {
      margin-top: 13px;

      .route {
        cursor: pointer;
        padding-right: 22px;
        padding-left: 63px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 48px;
        line-height: 48px;
        text-align: center;
        font-family: Segoe UI;
        font-size: 18px;
        color: #8b8b8b;
      }

      .is-active {
        background-color: #f6061e;
        color: #fff;
      }
    }
  }
}
</style>